<template>
  <div class="op-group comp-op-common">
    <div class="op-title">常规</div>
    <div class="option-item">
      <div class="title-row no-sub">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, rowCommonDelete)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          删除所选行
        </span>
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doAction(rowCommonDelete)"
          >确定</a-button
        >
      </div>
    </div>
    <div class="option-item">
      <div class="title-row no-sub">
        <span
          class="view-icon"
          title="预览"
          @mouseleave="onMouseLeave()"
          @mouseenter="onMouseEnter($event, rowCommonKeep)"
        >
          <img src="~@/assets/dataset/preview.png" alt="preview" />
        </span>
        <span class="label">仅保留所选行</span>
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doAction(rowCommonKeep)"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Vue } from 'vue-property-decorator'
import dataPreview from '../common/dataPreview.vue'

@Component({
  components: {
    dataPreview,
  },
})
export default class VisualRecommendation extends Vue {
  /** 删除所选行 */
  public rowCommonDelete: string = `${OptionPreViewAction.rowCommonDelete}`

  /** 仅保留所选行 */
  public rowCommonKeep: string = `${OptionPreViewAction.rowCommonKeep}`

  /** 预览鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 预览鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  /** 操作 */
  doAction(action: string) {
    if (action === this.rowCommonDelete) {
      this.$emit('actiondone', {
        action,
        desc: '行>删除当前行',
      })
    } else if (action === this.rowCommonKeep) {
      this.$emit('actiondone', {
        action,
        desc: '行>仅保留所选行',
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
